<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>结算</title>
    <!-- 引入样式-->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.1/theme-chalk/index.min.css">
    <!-- 引入组件库 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.1/index.min.js"></script>

    <link rel="stylesheet" href="layui/css/layui.css"/>
    <link rel="stylesheet" href="css/shopping.css"/>
    <link rel="stylesheet" href="css/buy.css"/>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="layer/layer.js"></script>
    <script type="text/javascript" src="layui/layui.js"></script>

    <!--该页面需要登录的权限认证-->
    <script src="js/auth.js"></script>
    <script>

    </script>

</head>
<body>
<div id="bg"></div>
<div id="addAdrInp">
    <h2>添加收件人</h2>
    <p>收件人：<input type="text" id="name"/></p>
    <p>电话：<input type="text" id="phone"/></p>
    <p>地址：<input type="text" id="adr"/></p>
    <p>
        <button id="buy-subBtn">添加</button>
    </p>
</div>

<!-- 引入头部 -->
<div>
    <iframe src="header.html" scrolling="no" style="height:140px;width: 100%;border: 0px;"></iframe>
</div>
<!--引入头部end-->

<hr style="height: 10px; background-color: #FF4400;"/>

<div id="app">
    <!--收货地址部分-->
    <div class="layui-container">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
            <legend>收货地址</legend>
        </fieldset>
        <div class="layui-row">
            <div class="layui-col-md12">
                <!-- 添加收货地址按钮 -->
                <button id="addAddress" class="layui-btn layui-btn-normal">
                    <i class="layui-icon layui-icon-add-1"></i>
                    新增收货地址
                </button>
                <br/>
                <!-- 显式收货地址 -->
                <div @click="changeAddress(index)" class="my-showAddress " v-for="(add,index) in currentUserAddressList"
                     :key="add.id" :class="{'sel': index === currentSelectAddressIndex  }">
                    <p style="border-bottom:1px solid gainsboro;">
                        {{add.realname}}（收）&nbsp;&nbsp;{{add.mobile}}
                    </p>
                    <p>
                        {{add.province}}&nbsp;{{add.city}}&nbsp;{{add.zone}}
                    </p>
                    <p>
                        {{add.street}}
                    </p>
                    <p class="my-address-edit">
                        <a href="">编辑</a>
                        <a href="">删除</a>
                    </p>
                </div>

            </div>
        </div>

    </div>
    <!--收货地址end-->
    <!--商品清单-->
    <div class="layui-container" style="top:-30px;">
        <div class="layui-row">
            <div class="layui-col-md12">
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
                    <legend>商品清单</legend>
                </fieldset>

                <table class="layui-table my-shopping-table" lay-skin="line">
                    <colgroup>
                        <col width="160">
                        <col width="">
                        <col width="100">
                        <col width="100">
                        <col width="100">
                    </colgroup>
                    <thead>
                    <tr>
                        <th style="font-weight: bold;">

                        </th>
                        <th style="font-weight: bold;">
                            商品信息
                        </th>
                        <th style="text-align: center;font-weight: bold;">
                            单价
                        </th>
                        <th style="text-align: center;font-weight: bold;">
                            数量
                        </th>
                        <th style="text-align: center;font-weight: bold;">
                            合计
                        </th>

                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>
                            <a href="">
                                <img :src="currentBuyItem.pic" width="80px"/>
                            </a>
                        </td>
                        <td>
                            <a href="">
                                {{currentBuyItem.name}}
                            </a>
                        </td>
                        <td align="center">
                            <span>￥{{currentBuyItem.price}}</span>
                        </td>
                        <td align="center">
                            ×{{currentBuyItem.buyNum}}件
                        </td>
                        <td align="center">
                            <span>￥{{currentBuyItem.price * currentBuyItem.buyNum}}</span>
                        </td>

                    </tr>

                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <!--商品清单end-->

    <!--付款部分-->
    <div class="layui-container" style="top: -20px;">
        <div class="layui-row  my-shopping-buy">
            <div class="layui-col-md12">
                <div class="my-buyCheck">
                </div>
                <div class="my-buyBtn">
                    总价：
                    <font style="font-size: 20px;font-weight: bold;color:#FF4400;">￥{{cart.totalPrice}}</font>
                    <button id="buyBtn" @click="goToPay">去付款</button>
                </div>
            </div>

        </div>
    </div>
    <!--付款部分end-->
    <!--引入底部-->
    <div class="my-footer">
        <iframe src="footer.html" scrolling="no" style="border: 0px;width: 100%;height: 291px;"></iframe>
    </div>
</div>

<script src="js/include/libs.js"></script>

<!--引入底部end-->
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            currentBuyItemId: getQueryVariable("id"),
            currentBuyItem: {},
            currentUserAddressList: [], //当前用户的收货地址列表
            currentLoginSuccessUser: {},
            currentSelectAddressIndex: 0, //第一个收货地址是默认收货地址
            cart: {
                totalPrice: 0.0
            }  //当前用户的购物车对象，这个对象默认保存在localStorage;
        },
        mounted() {
            this.initCurrentBuyItem();
            this.currentLoginSuccessUser = JSON.parse(localStorage.getItem("currentLoginSuccessUserInfo"));
            console.log("=====当前登录成功的用户信息如下====")
            console.log(this.currentLoginSuccessUser);

            this.initUsersAddressList();
        },
        methods: {
            initUsersAddressList() {
                queryUsersAddressListByUid(this.currentLoginSuccessUser.uid).then(resp => {
                    if (resp.data.code === 200) {
                        this.currentUserAddressList = resp.data.data;
                        console.log("当前登录成功的用户的收货地址信息如下：")
                        console.log(this.currentUserAddressList);
                    }
                })
            },

            initCurrentBuyItem() {
                queryItemById(this.currentBuyItemId).then(resp => {
                    if (resp.data.code === 200) {
                        this.currentBuyItem = resp.data.data;
                        this.currentBuyItem.buyNum = getQueryVariable("buyNum");
                        console.log("------商品详情如下-------");
                        console.log(this.currentBuyItem);

                        this.cart.totalPrice = this.currentBuyItem.price * this.currentBuyItem.buyNum
                    }
                })
            },

            changeAddress(index) {
                this.currentSelectAddressIndex = index;
            },

            goToPay() {

                //生成一个购物车对象。
                this.cart.goodsList = [
                    this.currentBuyItem
                ];
                this.cart.address = this.currentUserAddressList[this.currentSelectAddressIndex];
                this.cart.userinfo = this.currentLoginSuccessUser;
                let sum = 0;
                for (let i = 0; i < this.cart.goodsList.length; i++) {
                    let good = this.cart.goodsList[i];
                    sum += good.price * good.buyNum;
                }
                this.cart.totalPrice = sum;
                //打印当前用户的购物车对象。
                console.log("------------付款前用户的购物车对象信息如下---------------")
                console.log(this.cart);
                //把用户的购物车对象保存在浏览器的localStorage中；
                localStorage.setItem("buynow.xiaomimall_" + this.currentLoginSuccessUser.uid, JSON.stringify(this.cart));



                //页面跳转到支付页面
                setTimeout(() => {
                    window.location.href = 'pay.html?type=buynow';
                }, 1000);

            }
        }
    })
</script>
</body>
</html>
